<template>
    <div class="publicpageview currentpage">
        <div class="publicpageleft">
            <div class="listitem" v-for="item in list" :key="item.id" @click="handleItemclick(item)">
                <svg-icon :icon-class="item.icon" :color="item.id == currentActive ? '#008C93' : '#333333'"></svg-icon>
                <div class="itemname colorActive" v-if="item.id == currentActive">{{item.title}}</div>
                <div class="itemname" v-else>{{item.title}}</div>
                <div v-if="item.title == '收件箱'">
                    <div class="news" v-if="ggmath > 0">{{ggmath}}</div>
                    <div class="newss" v-else>{{ggmath}}</div>
                </div>
            </div>
        </div>
        <div class="publicpageright" v-if="currentActive == 2">
            <div style="margin-bottom: 15px;">编辑邮件</div>
            <el-form :rules="rules" :inline="true" :model="formData" size="mini" ref="searchForm" label-width="100px">

                <el-row>
                    <el-form-item label="标题：" prop="subject">
                        <el-input v-model="formData.subject"></el-input>
                    </el-form-item>
                </el-row>

                <el-row>
                    <el-form-item label="收件人：" prop="receiverIds">


                        <el-select v-model="formData.receiverIds" multiple filterable remote reserve-keyword
                            placeholder="请输入用户名" :remote-method="remoteMethod">
                            <el-option v-for="item in userList" :key="item.uid" :label="item.username"
                                :value="item.uid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>

                <el-row>
                    <el-form-item label="内容：" prop="content">
                        <quill-editor v-model="formData.content" :options="editorOption" />
                    </el-form-item>
                </el-row>

                <el-row>
                    <el-form-item label="附件：" prop="isPlanSubmission">
                        <el-upload class="upload-demo" :action="uploadAction" :on-remove="handleRemove" multiple
                            :file-list="zhanfileList" :on-success="handleUploadSuccess2" :on-preview="handlePreview">
                            <el-button size="small" type="text">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                </el-row>
            </el-form>

            <div style="padding-left: 100px;">
                <el-button type="primary" size="mini" @click="handleSend">发 送</el-button>
            </div>
        </div>

        <div class="publicpageright" v-if="currentActive == 0">
            <div class="publicpagerightBottom">
                <div class="publicpagerightBottomTop">
                    <div :class="currentTab == 0 ? 'activetabItem' : 'tabItem'" @click="changeTabs">未读</div>
                    <div :class="currentTab == 1 ? 'activetabItem' : 'tabItem'" @click="changeTabs">已读</div>
                </div>

                <div class="listview">
                    <el-table :data="dataList" border size="mini" style="margin-top: 10px;">
                        <el-table-column align="center" label="标题" prop="subject">
                        </el-table-column>
                        <el-table-column align="center" label="发件人" prop="senderName">

                        </el-table-column>
                        <el-table-column align="center" label="发布时间" width="100" prop="senderName">
                        </el-table-column>
                    </el-table>
                </div>

                <div class="publicpaginationview">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
                        :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        small></el-pagination>
                </div>
            </div>
        </div>


        <div class="publicpageright" v-if="currentActive == 1">
            <div class="publicpagerightBottom">

                <div class="listview">
                    <el-table :data="dataList2" border size="mini" style="margin-top: 10px;">
                        <el-table-column align="center" label="标题" prop="subject">
                        </el-table-column>
                        <el-table-column align="center" label="发件人" prop="senderName">

                        </el-table-column>
                        <el-table-column align="center" label="发布时间" prop="sendTime">
                        </el-table-column>
                    </el-table>
                </div>

                <div class="publicpaginationview">
                    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                        :current-page="listQuery2.pageNum" background :page-sizes="[10, 20, 50, 100]"
                        :page-size="listQuery2.pageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="total2" small></el-pagination>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import { userList } from '@/api/system'
import { createEmail, queryCounts, emailList, sendList } from '@/api/public'
export default {
    name: 'AccommodationManagementIndex',


    data() {
        return {
            currentActive: 0,
            userStatus: "0",
            status: "0",
            probleam: "",
            fankuitext: "",
            uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
            zhanfileList: [],
            list: [
                {
                    id: 0,
                    title: '收件箱',
                    icon: "message"
                },
                {
                    id: 1,
                    title: '发件箱',
                    icon: "收件箱"
                },
                {
                    id: 2,
                    title: '发送邮件',
                    icon: '发送邮件'
                }

            ],
            formData: {
                subject: "",
                content: "",
                receiverIds: "",
                senderId: "",

            },
            editorOption: {
                // 配置选项
            },
            rules: {
                subject: [
                    { required: true, message: '标题不能为空', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请编辑发送内容', trigger: 'blur' }
                ],
                receiverIds: [
                    { required: true, message: '请选择联系人', trigger: 'blur' }
                ],

            },
            userList: [],
            ggmath: 0,
            currentTab: 0,
            listQuery: {
                pageNum: 1,
                isRead: 0,
                pageSize: 10
            },
            total: 0,
            dataList: [],

            listQuery2: {
                pageNum: 1,

                pageSize: 10
            },
            total2: 0,
            dataList2: [],
        };
    },

    mounted() {
        queryCounts().then(res => {
            this.ggmath = res.data.unReaCount ? res.data.unReaCount : 0;
        });
        this.getList();
        this.getList2();
    },

    methods: {
        changeTabs() {
            this.currentTab = this.currentTab == 0 ? 1 : 0;
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this.getList();
        },

        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },

        handleSizeChange2(val) {
            this.listQuery2.pageNum = 1;
            this.listQuery2.pageSize = val;
            this.getList2();
        },
        handleCurrentChange2(val) {
            this.listQuery2.pageNum = val;
            this.getList2();
        },

        getList() {
            emailList({ ...this.listQuery, isRead: this.currentTab }).then(res => {
                this.dataList = res.data.list;
                this.total = res.data.total
            })
        },

        getList2() {
            sendList({ ...this.listQuery2 }).then(res => {
                this.dataList2 = res.data.list;
                this.total2 = res.data.total
            })
        },
        remoteMethod(query) {
            if (query != '') {

                userList({ pageNum: 1, pageSize: 10000000, keyword: query }).then((response) => {
                    this.userList = response.data.list;
                });
            }
        },
        handleSelect(item) {
            console.log(item);
        },
        handleSend() {
            this.$refs.searchForm.validate((valid) => {
                if (valid) {
                    let str = []
                    if (this.zhanfileList.length > 0) {
                        this.zhanfileList.forEach(item => {
                            str.push({ url: item.response.data.url, name: item.response.data.name })
                        })

                    }

                    createEmail({ file: JSON.stringify(str), ...this.formData, receiverIds: this.formData.receiverIds.join(','), senderId: localStorage.getItem("userId") }).then(res => {
                        this.$refs.searchForm.resetFields();
                        this.zhanfileList = [];
                        this.$message.success("发送成功")
                    })
                }
            })
        },
        handleUploadSuccess2(response, file, fileList) {
            this.zhanfileList = fileList
        },
        handleItemclick(item) {
            this.currentActive = item.id;
            if (item.id != 2) {
                queryCounts().then(res => {
                    this.ggmath = res.data.unReaCount ? res.data.unReaCount : 0;
                });
                this.getList();
                this.getList2();
            }
        },
        handleRemove(file, fileList) {
            this.zhanfileList = fileList
        },

        handlePreview(file) {
            window.open(file.response.data.url, '_blank');
        },
        save() {
            this.$confirm(
                "保存成功，感谢您的反馈，我们将竭力为您服务",
                "提示",
                {
                    confirmButtonText: "关闭",
                    showCancelButton: false,
                    type: "warning",
                }
            )
                .then(() => {

                })
                .catch(() => { });
        },
        cancel() {
            this.$confirm(
                "取消后将不会保存您所输入的内容，请确认是否取消",
                "提示",
                {
                    confirmButtonText: "确 定",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    if (this.currentActive == 1) {
                        this.probleam = "";
                        this.userStatus = "0";
                    }

                    if (this.currentActive == 2) {
                        this.fankuitext = "";
                        this.status = "0";
                    }
                })
                .catch(() => { });
        },

    },
};
</script>

<style scoped>
.currentpage {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    /* align-items: center; */
    height: 100%;
}

.publicpageleft {
    width: 152px;
    height: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 24px 25px;
}

.listitem {
    width: 100%;
    display: flex;
    height: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    cursor: pointer;
}

.itemname {
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    flex: 1;
    padding-left: 8px;
}



.colorActive {
    color: #008C93 !important;
}

.publicpageright {
    flex: 1;

    height: 100%;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
}

.bangzhuzhongxin {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 24px;
}

.el-select {
    width: 30%;
}

.inputview {
    width: 100%;
    margin-top: 24px;
}

.buttonview {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24px;
}

::v-deep .el-input--mini {
    width: 500px;
}

.news {
    width: 16px;
    height: 16px;
    background: #FF4C4F;
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    line-height: 16px;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 12px;

}

.newss {
    width: 16px;
    height: 16px;
    background: #CCCCCC;
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    line-height: 16px;
    color: #ffffff;
    font-weight: 400;
    font-size: 12px;
}

.publicpagerightBottom {
    flex: 1;
    margin-top: 8px;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 24px;
}

.publicpagerightBottomTop {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.activetabItem {
    width: 100px;
    height: 40px;
    background: #008C93;
    border-radius: 4px 4px 0px 0px;
    line-height: 40px;

    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-align: center;
    margin-right: 8px;
    cursor: pointer;
}

.tabItem {
    width: 100px;
    height: 40px;
    background: #EFF2F7;
    border-radius: 4px 4px 0px 0px;
    line-height: 40px;

    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-align: center;
    margin-right: 8px;
    cursor: pointer;
}

.listview {
    width: 100%;
}

.listItem {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #D9D9D9;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.listItemTitle {
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.listItemTime {

    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 8px;
}

.shezhiyidu {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: #008C93;

    font-style: normal;
    text-transform: none;
    cursor: pointer;
}
</style>